| @@ -93,6 +93,26 @@ | ||
| 93 | 93 | width: 30px; | 
| 94 | 94 | z-index: 99999; | 
| 95 | 95 | } | 
| 96 | + | |
| 97 | +        .nomark-buy, .origin-buy { | |
| 98 | + position: fixed; | |
| 99 | + bottom: 0; | |
| 100 | + width: 50%; | |
| 101 | + height: 50px; | |
| 102 | + line-height: 50px; | |
| 103 | + text-align: center; | |
| 104 | + color: whitesmoke; | |
| 105 | + border: 1px solid #fff; | |
| 106 | + border-radius: 5px; | |
| 107 | + box-sizing: border-box; | |
| 108 | + z-index: 99999; | |
| 109 | + } | |
| 110 | +        .nomark-buy { | |
| 111 | + left: 0; | |
| 112 | + } | |
| 113 | +        .origin-buy { | |
| 114 | + right: 0; | |
| 115 | + } | |
| 96 | 116 | </style> | 
| 97 | 117 | </head> | 
| 98 | 118 | <body> | 
| @@ -110,6 +130,10 @@ | ||
| 110 | 130 | <div id="mask-thump" class="mask-thump"> | 
| 111 | 131 | <img class="" src="../../static/img/thumbup.png" /> | 
| 112 | 132 | </div> | 
| 133 | + <div id="buy" style="display:none"> | |
| 134 | + <div id="nomark" class="nomark-buy">去除水印</div> | |
| 135 | + <div id="origin" class="origin-buy">购买原图</div> | |
| 136 | + </div> | |
| 113 | 137 | </div> | 
| 114 | 138 | <!-- Root element of PhotoSwipe. Must have class pswp. --> | 
| 115 | 139 | <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true"> | 
| @@ -960,6 +984,7 @@ | ||
| 960 | 984 | var leftImgs = ''; | 
| 961 | 985 | var rightImgs = ''; | 
| 962 | 986 | var swipeItems = []; | 
| 987 | + var curIdx = -1; | |
| 963 | 988 |  | 
| 964 | 989 |          for (var i = 0; i < session_photos.length; i++) { | 
| 965 | 990 | var photos = session_photos[i].photos; | 
| @@ -967,7 +992,7 @@ | ||
| 967 | 992 | photoHeight = photos[j].photo_thumbnail_h / photos[j].photo_thumbnail_w * photoWidth; | 
| 968 | 993 | var header = ( | 
| 969 | 994 | '<div class="photo-top">' + | 
| 970 | -                        '<img class="group-avatar float-left" src="../../static/img/{0}.png" />' + | |
| 995 | +                        '<img class="group-avatar float-left" src="../../static/img/fruits/{0}.png" />' + | |
| 971 | 996 |                          '<text class="group-name float-left">{1}</text>' + | 
| 972 | 997 |                          '<text class="section-text float-right">{2}</text>' + | 
| 973 | 998 | '</div>' | 
| @@ -1010,25 +1035,39 @@ | ||
| 1010 | 1035 | // Tap on sliding area should close gallery' | 
| 1011 | 1036 | tapToClose: true, | 
| 1012 | 1037 | }; | 
| 1038 | + | |
| 1039 | +        function buyornot() { | |
| 1040 | +            $('#buy').show(); | |
| 1041 | + } | |
| 1042 | + | |
| 1013 | 1043 | // Initializes and opens PhotoSwipe | 
| 1014 | 1044 |          $('#photos img').click(function () { | 
| 1015 | -            options['index'] = parseInt($(this).attr('data-idx')); | |
| 1045 | +            curIdx = parseInt($(this).attr('data-idx')); | |
| 1046 | + options['index'] = curIdx; | |
| 1016 | 1047 | var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, swipeItems, options); | 
| 1017 | 1048 | gallery.init(); | 
| 1018 | 1049 |  | 
| 1050 | + buyornot(); | |
| 1019 | 1051 |              $('#mask-thump').show(); | 
| 1020 | 1052 |  | 
| 1021 | 1053 | // After slides change | 
| 1022 | 1054 | // (after content changed) | 
| 1023 | 1055 |              gallery.listen('afterChange', function() { | 
| 1024 | 1056 | console.log(gallery.getCurrentIndex()) | 
| 1057 | + curIdx = gallery.getCurrentIndex(); | |
| 1058 | + buyornot() | |
| 1025 | 1059 | }); | 
| 1026 | 1060 |  | 
| 1027 | 1061 | // Gallery starts closing | 
| 1028 | 1062 |              gallery.listen('close', function() { | 
| 1063 | +                $('#buy').hide(); | |
| 1029 | 1064 |                  $('#mask-thump').hide(); | 
| 1030 | 1065 | }); | 
| 1031 | 1066 | }) | 
| 1067 | + | |
| 1068 | +        $('#nomark').click(function () { | |
| 1069 | + | |
| 1070 | + }) | |
| 1032 | 1071 | }) | 
| 1033 | 1072 | </script> | 
| 1034 | 1073 | <script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.3.2.js"></script> |